<template>
  <el-dialog v-model="tjsjDialog" title="添加事件" @closed="handleclose">
    <el-form :model="event">
      <el-form-item label="事件编号" :label-width="formLabelWidth">
        <el-input v-model="event.number" placeholder="" disabled />
      </el-form-item>
      <el-form-item label="事件类型" :label-width="formLabelWidth">
        <el-select v-model="event.type" class="m-2" placeholder="Select">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="事件等级" :label-width="formLabelWidth">
        <el-select v-model="event.level" class="m-2" placeholder="Select">
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="发布时间" :label-width="formLabelWidth">
        <el-date-picker
          v-model="event.time"
          type="datetime"
          placeholder=""
          style="width:250px"
          format="YYYY/MM/DD HH:mm:ss"
          value-format="YYYY-MM-DD HH:mm:ss"
        />
      </el-form-item>
      <el-form-item label="发生地点" :label-width="formLabelWidth">
        <el-input v-model="event.addr" placeholder="请输入发生地点" clearable />
      </el-form-item>
      <el-form-item label="车牌号" :label-width="formLabelWidth">
        <el-input
          v-model="event.insignia"
          placeholder="请输入车牌号"
          clearable
        />
      </el-form-item>
      <el-form-item label="驾驶员" :label-width="formLabelWidth">
        <el-input v-model="event.driver" placeholder="请输入驾驶员" clearable />
      </el-form-item>
      <el-form-item label="处理状态" :label-width="formLabelWidth">
        <el-select v-model="event.statusnew" class="m-2" placeholder="Select">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="handleConfirm">提交</el-button>
        <el-button @click="handleCancel">重置</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { onMounted, reactive, ref,unref } from 'vue'
import { useUsersStore } from '@/stores/user'
import { mapActions, storeToRefs } from 'pinia'
import { docLayer } from '@/zondy_libs'
import { Point } from '@/zondy_api/Point.js'
import { useGlobalMap } from '@/utils/globalMap.js'
// const fbggDialog = ref(false)
const formLabelWidth = '100px'

//使用pina
const store = useUsersStore()
const { tjsjDialog, activeIndex, positionPoint } = storeToRefs(store)
const notice = reactive({
  content: '',
  time: '',
})

onMounted(() => {
  gettime()
})
//表格数据
const event = ref({
  number: '',
  type: '',
  level: 1,
  time: '',
  addr: '',
  insignia: '',
  driver: '',
  statusnew: 0,
})
// 测试数据
const options = [
  {
    value: '碰撞',
    label: '碰撞',
  },
  {
    value: '刮擦',
    label: '刮擦',
  },
  {
    value: '追尾',
    label: '追尾',
  },
  {
    value: '翻车',
    label: '翻车',
  },
  {
    value: '碾压',
    label: '碾压',
  },
  {
    value: '失火',
    label: '失火',
  },
  {
    value: '其他',
    label: '其他',
  },
]
const options2 = [
  {
    value: 0,
    label: '待处理',
  },
  {
    value: 1,
    label: '处理中',
  },
  {
    value: 2,
    label: '已归档',
  },
]
const options3 = [
  {
    value: 1,
    label: '轻微事故',
  },
  {
    value: 2,
    label: '一般事故',
  },
  {
    value: 3,
    label: '重大事故',
  },
  {
    value: 4,
    label: '特大事故',
  },
]
//关闭按钮执行的方法
function handleclose() {
  store.tjsjDialog = false
  store.finishaddenvent=true
  store.activeIndex = '0'
  handleCancel()
}
//重置方法
function handleCancel() {
  gettime()
  event.value = {
  number: event.value.number,
  type: '',
  level: 1,
  time: '',
  addr: '',
  insignia: '',
  driver: '',
  statusnew: 0,
}
}
//发布方法
function handleConfirm() {
  let service = {
    name: 'guanggu',
    layerId: 2,
  }
  var attr = [
    { type: 'int', key: '事件编号', value: event.value.number },
    { type: 'string', key: '事件类型', value: event.value.type },
    { type: 'int', key: '事件等级', value: event.value.level },
    { type: 'string', key: '发生时间', value: event.value.time },
    { type: 'string', key: '发生地点', value: event.value.addr },
    { type: 'string', key: '车牌号', value: event.value.insignia },
    { type: 'string', key: '驾驶员', value: event.value.driver },
    { type: 'int', key: '处理状态', value: event.value.statusnew },
    { type: 'int', key: 'mpLayer', value: 0 },
  ]
  const status = event.value.statusnew
  Point.add({
    position: store.positionPoint,
    attr,
    service,
    docLayer,
    status,
  })
  docLayer.refresh()
  //清除数据
  handleCancel()
  //关闭窗口
  store.tjsjDialog = false
  store.activeIndex = '0'
}
//获取事件编号的方法
function gettime() {
  var NowTime = new Date()
  const y = NowTime.getFullYear()
  const m = NowTime.getMonth() + 1
  const d = NowTime.getDate()
  const h = NowTime.getHours()
  const mt = NowTime.getMinutes()
  const s = NowTime.getSeconds()
  event.value.number = 'sj' + y + m + d + h + mt + s
}
</script>
<style scoped>
.el-button--text {
  margin-right: 0px;
}
.el-input {
  width: 250px;
}
.dialog-footer button:first-child {
  margin-right: 0px;
}
</style>
